<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>借用历史</title>
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="../../../../plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
    <link rel="stylesheet" href="../../../../plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../../../dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="../../../../dist/css/fonts.css" rel="stylesheet">
</head>

<body class="hold-transition sidebar-mini">
    <div class="wrapper">
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light" id="navbar_menu">
            <!-- Left navbar links -->
        </nav>
        <!-- /.navbar -->
        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4" id="sidebar_menu">
        </aside>
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <section class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1>借用历史</h1>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item"><a href="#">主页</a></li>
                                <li class="breadcrumb-item active">借用历史</li>
                            </ol>
                        </div>
                    </div>
                </div><!-- /.container-fluid -->
            </section>
            <div class="content">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">历史借用列表</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body table-responsive p-0">
                                <table class="table table-hover text-nowrap">
                                    <thead>
                                        <tr>
                                            <th style="text-align: center;">物品编号</th>
                                            <th style="text-align: center;">物品名称</th>
                                            <th style="text-align: center;">借用数量</th>
                                            <th style="text-align: center;">借用人姓名</th>
                                            <th style="text-align: center;">借用人学号</th>
                                            <th style="text-align: center;">借用日期</th>
                                            <th style="text-align: center;">归还日期</th>
                                            <th style="text-align: center;">借用状态</th>
                                        </tr>
                                    </thead>
                                    <tbody id="pageBody">
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->

                            <div class="card-footer clearfix">
                                <ul class="pagination pagination-sm m-0 float-right" id="turnPages">
                                    <li class="page-item dropdown" style="margin-top:-5px" data-page="-2">
                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
                                            每页10条 <span class="caret"></span>
                                        </a>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" tabindex="5" href="" onclick="return false">5</a>
                                            <a class="dropdown-item" tabindex="10" href="" onclick="return false">10</a>
                                            <a class="dropdown-item" tabindex="20" href="" onclick="return false">20</a>
                                            <a class="dropdown-item" tabindex="30" href="" onclick="return false">30</a>
                                            <a class="dropdown-item" tabindex="40" href="" onclick="return false">40</a>
                                            <a class="dropdown-item" tabindex="50" href="" onclick="return false">50</a>
                                        </div>
                                    </li>
                                    <li class="page-item" data-page="0">
                                        <a class="page-link" href="javascript:void(0);">&laquo;</a>
                                    </li>

                                </ul>
                            </div>

                            <!-- <div class="card-footer clearfix">
                                <ul class="pagination pagination-sm m-0 float-right" id="turnPages">
                                    <li class="page-item" data-page="0">
                                        <a class="page-link" href="javascript:void(0);">&laquo;</a>
                                    </li>
                                    <li class="page-item" data-page="-1">
                                        <a class="page-link" href="javascript:void(0);">&raquo;</a>
                                    </li>
                                </ul>
                            </div> -->
                        </div>
                        <!-- /.card -->

                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>

            </div>
            <!-- /.content -->
        </div>
    </div>
    <!-- /.content-wrapper -->
    </div>
    <!-- ./wrapper -->
    <!-- REQUIRED SCRIPTS -->
    <!-- jQuery -->
    <script src="../../../../plugins/sweetalert2/sweetalert2.min.js"></script>
    <script src="../../../../plugins/jquery/jquery.min.js"></script>
    <script>
        // 引入左边导航栏
        $.get("../../../../bars/Admin/admin_sidebar.html", function (data) {
            // console.log(data)
            $("#sidebar_menu").html(data);
        })
        //引入上边导航栏 
        $.get("../../../../bars/Admin/admin_navbar.html", function (data) {
            $("#navbar_menu").html(data);
        })
    </script>

    <!-- Bootstrap 4 -->
    <script src="../../../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../../../../plugins/sweetalert2/sweetalert2.min.js"></script>
    <script src="../../../../dist/js/adminlte.min.js"></script>
    <script>
        const Toast = Swal.mixin({
            toast: true,
            showConfirmButton: false,
            timer: 1500
        });
        let page_limit = 10
        let page_current = 1
        let max_page
        $(function () {
            // 翻页按钮委托注册事件
            $.ajax({
                type: 'POST',
                url: '/admin/getBorrowHistoryList',
                async: true,
                dataType: 'json',
                data: {
                    page: page_current,
                    limit: page_limit
                },
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    console.log(res)
                    max_page = Math.ceil(res.count / page_limit)
                    buildTableFooter(max_page)
                    buildTableBody(res.data)
                },
                error: function (err) {
                    // console.log(JSON.stringify(err))
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });

            $("#turnPages").on("click", "li", function (data) {
                let activePage = $(this).data("page")
                if(activePage===-2){
                    return 
                }else if(activePage===0){
                    if(page_current != 1){
                        page_current = page_current-1
                    }
                }else if(activePage===-1){
                    if(page_current != max_page){
                        page_current = page_current+1
                    }
                }else{
                    page_current = activePage
                }
                $("#turnPages").children().eq(page_current+1).addClass("active").siblings().removeClass("active")
                $.ajax({
                    type: 'POST',
                    url: '/admin/getBorrowHistoryList',
                    async: true,
                    dataType: 'json',
                    data: {
                        page: page_current,
                        limit: page_limit
                    },
                    contentType: "application/x-www-form-urlencoded",
                    success: function (res) {
                        // console.log(res)
                        let page_count = (Math.ceil(res.count / page_limit))
                        // buildTableFooter(page_count)
                        buildTableBody(res.data)
                    },
                    error: function (err) {
                        // console.log(JSON.stringify(err))
                        Toast.fire({
                            icon: 'error',
                            title: ' 请重试'
                        })
                        return false
                    }
                });
            })
        });
        function buildTableFooter(data) {
            let pageNum = data
            let $a
            console.log($("#turnPages").children("li:first"))
            $("#turnPages").children("li:first").next().nextAll().remove()
            let $arrow = '<li class="page-item" data-page="-1"><a class="page-link" href="javascript:void(0);">&raquo;</a></li>'
            $("#turnPages").children("li:first").next().after($arrow)
            for (let i = data; i > 0; i--) {
                $a = "<li class=\"page-item\" data-page=\"" + i + "\"><a class=\"page-link\" href=\"javascript:void(0);\" >" + i + "</a></li>"
                $("#turnPages").children("li:first").next().after($a)
            }
            // $("#turnPages").children("li:first").next().next().addClass("active")
            
            $("#turnPages").children().eq(page_current+1).addClass("active")
        };
        $(".dropdown-menu").on("click", "a", function () {
            // console.log($(this).attr("tabindex"))
            let num = $(this).attr("tabindex")
            $(".dropdown-toggle").text("每页" + num + "条")
            page_limit = num
            page_current = 1
            $.ajax({
                    type: 'POST',
                    url: '/admin/getBorrowHistoryList',
                    async: true,
                    dataType: 'json',
                    data: {
                        page: page_current,
                        limit: page_limit
                    },
                    contentType: "application/x-www-form-urlencoded",
                    success: function (res) {
                        // console.log(res)
                        max_page = Math.ceil(res.count / page_limit)
                        buildTableFooter(max_page)
                        buildTableBody(res.data)
                    },
                    error: function (err) {
                        // console.log(JSON.stringify(err))
                        Toast.fire({
                            icon: 'error',
                            title: ' 请重试'
                        })
                        return false
                    }
                });
        })
        function buildTableBody(data) {
            let pageData = data.reverse()
            $("#pageBody").empty()
            let $tr = new Array()
            console.log(pageData.length)
            for (let i = 0; i < pageData.length; i++) {
                $tr = []
                $tr.push("<tr id=\"" + pageData[i].id + "\">")
                if( pageData[i].tid === ""){
                    $tr.push("<td style=\"text-align: center;\">" + "b"+pageData[i].bid + "</td >")
                }else{
                    $tr.push("<td style=\"text-align: center;\">" + "t"+pageData[i].tid + "</td >")
                }
                $tr.push("<td style=\"text-align: center;\">" + pageData[i].itemName + "</td >")
                $tr.push("<td style=\"text-align: center;\">" + pageData[i].amount + "</td>")
                $tr.push("<td style=\"text-align: center;\">" + pageData[i].memberName + "</td>")
                $tr.push("<td style=\"text-align: center;\">" + pageData[i].memberAccount + "</td>")


                $tr.push("<td style=\"text-align: center;\">" + pageData[i].startDate + "</td>")
                if(pageData[i].endDate==="" ||pageData[i].endDate===null ){
                    $tr.push("<td style=\"text-align: center;\"></td>")
                }else{
                    $tr.push("<td style=\"text-align: center;\">" + pageData[i].endDate + "</td>")
                }
                if (pageData[i].status === "未归还") {
                    $tr.push("<td style=\"text-align: center;\"><span class=\"badge bg-danger\" >未归还</span></td>")
                } else {
                    $tr.push("<td style=\"text-align: center;\"><span class=\"badge bg-success\" >已归还</span></td>")
                }
                $tr.push("</tr>")
                $tr = $tr.join("")
                console.log(typeof ($tr))
                $("#pageBody").append($tr)
            }

        }

    </script>
</body>

</html>